<template>
    <div>
        <!--        ishow为false隐藏课程列表-->
        <!--        头部组件-->
        <TopHead :isShow=false>
        </TopHead>
        <!--课程分类-->
        <div class="head-list">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
                <el-menu-item index="1"><a href="/index" class="link-active">首页</a></el-menu-item>
                <div class="green-line"></div>
                <el-submenu index="2">
                    <template slot="title" class="black">课程分类</template>
                    <el-menu-item v-for="(item,index) in courseList" :index="'2-'+index+1" :key="index">
                        {{item.subjectTitle}}
                    </el-menu-item>
                </el-submenu>
                <el-menu-item index="3"><a href="#" target="_blank">专属课程</a></el-menu-item>
            </el-menu>
        </div>
        <!--        轮播图-->
        <div class="swiper">
            <template>
                <el-carousel :interval="5000" arrow="always">
                    <el-carousel-item class="swiper-box" v-for="(item,index) in swiperList" :key="index"
                                      :style="{background:'url('+item.imgUrlPc+')'}">
                    </el-carousel-item>
                </el-carousel>
            </template>
        </div>
        <!--直播课程部分-->
        <div class="live-course">
            <h3>直播课程</h3>
            <div class="live-course-contect">
                <!-- 左边直播内容 -->
                <div class="live-window">
                    <div class="outer">
                        <img :src="imgList[index]" alt="" class="background-image">
                    </div>
                    <div class="inner">
                        <div class="left-title">求职技巧之重难点问题剖析与解决</div>
                        <div class="left-state"><img src="../../assets/duiw.png" alt="">直播结束</div>
                        <div class="left-appply">
                            <button class="live-over">直播结束</button>
                        </div>
                    </div>
                </div>
                <!-- 右边tab切换标题 -->
                <div class="live-content-right">
                    <ul class="tab-list">
                        <li v-for="(item,i) in tabList" :class="[index==i?'tab-list-active':'']"
                            @mouseover="changeColor(i)" :key="i">
                            <a href="#">
                                <img src="../../assets/dui.png" alt="">
                                <span class="end">{{item.liveStatus}}</span>
                                <span class="">{{item.livecontent}}</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--        免费课程-->
        <freeCourse></freeCourse>
        <!--        精选课程-->
        <boutiqueCourse></boutiqueCourse>
        <!--        折扣课程-->
        <discountCourse></discountCourse>
        <!--        精选头条-->
        <news></news>
        <!--        底部-->
        <blackFooter></blackFooter>
        <!--        QQ-->
        <fixed></fixed>
    </div>
</template>

<script>
    import TopHead from "../../components/topHead";
    import freeCourse from "./components/freeCourse";
    import boutiqueCourse from "./components/boutiqueCourse";
    import discountCourse from "./components/discountCourse";
    import news from "./components/news";
    import blackFooter from "../../components/blackFooter";
    import fixed from "./components/fixed";
    import {getCourselist, getslideShow} from "../../api";

    export default {
        name: "Index",
        data() {
            return {
                swiperList: [],//轮播图数据列表
                courseList: [],//课程列表
                index:0,
                tabList: [
                    {liveStatus: '直播结束', livecontent: '求职技巧之重难点问题剖析与解决'},
                    {liveStatus: '直播结束', livecontent: 'IT开发编程方向之职业规划'},
                    {liveStatus: '直播结束', livecontent: '研究生复试之高效准备简历的方法'},
                    {liveStatus: '直播结束', livecontent: '十大经典排序之Part-6-完结篇 '},
                    {liveStatus: '05-08 23:00', livecontent: 'jdk1.8-新特性之函数式接口与方法'}
                ],
                imgList: [
                    'https://online-course.nos-eastchina1.126.net/1-1352930580794179584.png',
                    'https://online-course.nos-eastchina1.126.net/直播封面-1254953535796150272.png',
                    'https://online-course.nos-eastchina1.126.net/123-1252130152859566080.png',
                    'https://online-course.nos-eastchina1.126.net/数据结构与算法 基础篇 拷贝-1252123020651134976.jpg',
                    'https://online-course.nos-eastchina1.126.net/封面-1258625253353979904.png'
                ],
            }
        },
        methods: {
            changeColor(i) {
                this.index = i
            },
        },
        components: {
            TopHead,//头部
            freeCourse,//免费课程
            boutiqueCourse,//精品课程
            discountCourse,//限时折扣课程
            news,//精选新闻
            blackFooter,//底部
            fixed,//固定定位
        },
        created() {
            //轮播图请求
            getslideShow(5).then(res => {
                this.swiperList = res.data;
            }).catch(err => {
                console.log(err)
            });
            getCourselist().then(res => {
                this.courseList = res.rows
            })
        }
    }
</script>

<style scoped lang="less">
    /*专属课程列表*/
    @left: 159.6px;
    @color: #00cf8c;
    .head-list {
        position: relative;
        float: left;
        margin-left: @left;
        margin-top: -30px;

        ul {
            border: 0;
        }

        a {
            font-size: 16px;
        }
    }

    .link-active {
        color: @color !important;
    }

    .green-line {
        position: absolute;
        left: 5px;
        bottom: 13px;
        width: 20px;
        height: 2px;
        background: @color;
    }

    .el-menu-item {
        padding-left: 0;
    }

    .el-menu--horizontal > .el-menu-item.is-active {
        border: 0;
    }

    /deep/ .el-submenu__title {
        color: #303133 !important;
        line-height: 65px !important;
    }

    /*轮播图*/
    .swiper {
        margin-top: 30px;
        width: 100%;
        height: 300px;
    }

    .swiper-box {
        /*height: 400px;*/
        background-repeat: no-repeat !important;
        background-position: center !important;
    }

    .el-carousel {
        width: 100%;
        height: 100%;
    }

    .el-carousel__container {
        width: 100%;
        height: 100%;
    }

    /*直播课程*/
    .tab-list-active {
        background: #fff;
        color: #00cf8c;
        border-left: 5px solid #00cf8c !important;
    }

    /*.tab-list>li:hover {*/
    /*    cursor: pointer;*/
    /*    background: #fff;*/
    /*    color: #00cf8c;*/
    /*    border-left: 5px solid #00cf8c;*/
    /*}*/
    .live-course {
        width: 100%;
        height: 416px;
        overflow: hidden;
    }

    .live-course h3 {
        margin: 50px auto 30px;
        width: 1200px;
        height: 36px;
        text-align: center;
    }

    .live-course-contect {
        width: 1200px;
        height: 350px;
        margin: auto;
    }

    .live-window {
        position: relative;
        float: left;
        width: 600px;
        height: 350px;
    }

    .outer {
        position: absolute;
        top: 0;
        left: 0;
        width: 600px;
        height: 350px;
        border-radius: 5px;
        z-index: -1 !important;
    }

    .outer img {
        width: 600px;
        height: 350px;
    }

    .inner {
        padding: 80px 50px;
        height: 350px;
        background-color: rgba(0, 0, 0, .6);
        border-bottom-left-radius: 5px;
        border-top-left-radius: 5px;
    }

    .left-title {
        font-size: 24px;
        opacity: 1;
        color: #f4f4f4;
        text-align: center;
    }

    .left-state {
        font-size: 14px;
        margin: 35px 0;
        height: 25px;
        opacity: 1;
        color: #f4f4f4;
        text-align: center;
    }

    .left-state img {
        width: 14px;
        height: 14px;
        margin-right: 10px;
    }

    .left-appply {
        opacity: 1;
        width: 500px;
        height: 50px;
        text-align: center;
    }

    .live-over {
        width: 180px;
        height: 50px;
        padding: 0 15px;
        font-size: 18px;
        color: #ffffff;
        background-color: #00cf8c;
        border-color: #00cf8c;
        text-shadow: 0 -1px 0 rgb(0 0 0 / 12%) !important;
        box-shadow: 0 2px 0 rgb(0 0 0 / 5%) !important;
    }

    .live-content-right {
        overflow: hidden;
        float: left;
        width: 600px;
        height: 350px;
        background-color: #f4f4f4;
        border: 1px solid #eee;
        opacity: 1;
        border-bottom-right-radius: 5px;
        border-top-right-radius: 5px;
        box-sizing: border-box;
    }

    .tab-list {
        overflow: hidden;
        width: 100%;
        /*height: 100%;*/
        padding: 0;
        margin-top: 0;
    }

    .tab-list > li {
        width: 100%;
        height: 50px;
        line-height: 50px;
        padding: 0 10px 0 30px;
        font-size: 16px;
        border-left: 5px solid rgba(0, 0, 0, 0);
    }

    .tab-list > li > a {
        color: black;
        text-decoration: none;
    }

    .tab-list > li img {
        width: 16px;
        height: 16px;
        margin-right: 20px;
    }

    .end {
        margin-right: 40px;
        font-size: 14px;
    }

</style>